<template>
    <div class="container wow animate__animated animate__fadeInUp" data-wow-duration="2s" data-wow-delay="0.1s">
        <h3 class="title">新闻中心</h3>
        <!-- 新闻列表区域  START -->
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 content" v-for="item in homeNewsList" :key="item.id">
                <div class="thumbnail long-thumbnail" @click="goNewDetail(item.id)">
                    <div class="img-container">
                        <img :src="item.imgUrl" :alt="item.title">
                    </div>
                    <div class="textArea">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.releaseDate }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻列表区域  END -->
        <router-link class="more" to="/new">了解更多</router-link>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, nextTick } from "vue";
import useNewStore from "@/store/modules/new.ts"  //引入new仓库
import { useRouter } from 'vue-router'
import WOW from "wow.js";// 在vue3中下载的是wow.js|vue2中是wowjs

const newStore = useNewStore()
let homeNewsList = computed(() => newStore.homeNewsList)
const router = useRouter()

onMounted(() => {
    getNewList()
    //初始化wow.js(页面滚动加载动画)
    nextTick(() => {   //页面渲染完，在执行
        new WOW().init()
    })
})
// 前往新闻详情页
const goNewDetail = (id: number) => {
    router.push({
        path: '/newDetail',
        query: {
            id
        }
    })
    //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
    setTimeout(() => {
        let goDetailTop = document.getElementById('new_detail')
        if (goDetailTop) {
            goDetailTop.scrollIntoView({
                behavior: 'smooth',//平滑滚动
                block: "center"//将指定位置滚动到页面中间
            })
        }
    }, 100)
}
// 获取新闻列表数据
const getNewList = async () => {
    await newStore.getNews()
}
</script>

<style scoped lang="scss">
.container {
    margin-top: 80px;
    font-family: "Source Han Sans CN";
    margin-bottom: 120px;

    .title {
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        color: #4F68AC;
    }

    .content {
        margin-bottom: 40px;

        .long-thumbnail {
            position: relative;
            border: 1px solid #fff;
            cursor: pointer;
            margin-top: 60px;

            .img-container {
                height: 198px;
                width: 100%;
                overflow: hidden;

                img {
                    width: 100%;
                    background-color: #f1f1f1;
                }
            }

            &:hover .textArea {
                transform: translateY(-50px);
                box-shadow:
                    0px 0px 1.8px -8px rgba(0, 0, 0, 0.014),
                    0px 0px 4px -8px rgba(0, 0, 0, 0.021),
                    0px 0px 6.9px -8px rgba(0, 0, 0, 0.026),
                    0px 0px 11px -8px rgba(0, 0, 0, 0.03),
                    0px 0px 17px -8px rgba(0, 0, 0, 0.034),
                    0px 0px 26.5px -8px rgba(0, 0, 0, 0.039),
                    0px 0px 44px -8px rgba(0, 0, 0, 0.046),
                    0px 0px 88px -8px rgba(0, 0, 0, 0.08);
            }

            .textArea {
                position: absolute;
                top: 50%;
                margin-top: 40px;
                left: 50%;
                margin-left: -140px;
                background-color: #fff;
                width: 280px;
                height: 140px;
                text-align: center;
                padding: 35px 30px;
                transition: all 0.6s ease;

                h3 {
                    font-size: 16px;
                    color: #666;
                    /* 显示两行文本，溢出显示省略号 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }

                p {
                    font-size: 14px;
                    color: #999;
                    margin-top: 15px;
                }
            }
        }

    }

    .more {
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 140px;
        display: block;
        margin: 100px auto 0px;
        border: 1px solid #999;
        background-color: #fff;
        font-size: 14px;
        color: #999;
        transition-duration: 0.3s;

        &:hover {
            text-decoration: none;
            background-color: #4F68AC;
            border: 1px solid #4F68AC;
            color: #fff;
        }

        &:active {
            transform: scale(0.95);
        }
    }
}
</style>